$c:#f3f3f3;
//导航
.nav {
    background-color: $c;
    color: #5a5a5a;
    padding: 8px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    >a {
        display: inline-block;
        text-indent: 8px;
        font-size: 14px;
    }
}

.brand {
    .brand_title {
        color: #874604;
        padding: 10px 0;
        font-size: 14px;
        background-color: #eee;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
        font-weight: 600;
    }
    .brand_list {
        padding: 0 10px 10px 10px;
        ul {
            li {
                >a {
                    position: relative;
                    padding: 10px 0;
                    color: #000;
                    border-bottom: 1px solid #ccc;
                    .num {
                        font-size: 14px;
                        padding: 0 5px;
                        color: #fcffff;
                        background-color: #c9c9c9;
                    }
                    .brandname {}
                    .sale {
                        color: #c9c9c9;
                        font-size: 14px;
                        padding-left: 20px;
                        padding-top: 8px;
                    }
                    .fa-angle-right {
                        position: absolute;
                        right: 0;
                        top: 15px;
                        font-size: 40px;
                        color: #c9c9c9;
                    }
                }
            }
            li:nth-child(1) {
                a {
                    .num {
                        background-color: #f10e0e;
                    }
                }
            }
            li:nth-child(2) {
                a {
                    .num {
                        background-color: #ff9314;
                    }
                }
            }
            li:nth-child(3) {
                a {
                    .num {
                        background-color: #8adf5b;
                    }
                }
            }
        }
    }
}

//销量排行
.rank {
    .rank_title {
        color: #874604;
        padding: 10px 0;
        font-size: 14px;
        background-color: #eee;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
        font-weight: 600;
    }
    .rank-list {
        ul {
            li {
                padding: 10px;
                border-bottom: 1px solid #ccc;
                a {
                    display: flex;
                    img {
                        width: 100px;
                        height: 100px;
                        margin-right: 10px;
                    }
                    .rank_info {
                        font-size: 14px;
                        .tit {
                            padding-top: 10px;
                        }
                        .price {
                            padding: 10px 0;
                        }
                        .other {}
                    }
                }
            }
        }
    }
}

//评论
.comment {
    .comment_title {
        color: #874604;
        padding: 10px 0;
        font-size: 14px;
        background-color: #f3f3f3;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
        font-weight: 600;
    }
    .comment-list {
        ul {
            li {
                padding: 10px;
                border-bottom: 1px solid #ccc;
                >a {
                    display: flex;
                    color: #999;
                    img {
                        width: 100px;
                        height: 100px;
                        padding-right: 10px;
                    }
                }
                .comment_box {
                    padding: 10px;
                    background-color: #f8f8f8;
                    position: relative;
                    border:1px solid #e7e7e7;  
                    &::before {
                        content: '';
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 29px;
                        top: -8px;
                        border-bottom: 8px solid #e7e7e7;
                        border-left: 8px solid transparent;
                        border-right: 8px solid transparent;
                    }
                    &::after{
                        content: '';
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 30px;
                        top: -7px;
                        border-bottom: 8px solid #f8f8f8;
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                    }
                    .name {
                        padding-bottom: 10px;
                        display: flex;
                        justify-content: space-between;
                        color: #999;
                        .name_content {
                            .star{
                                display: inline-block;
                                width: 100px;
                                height: 18px;
                                vertical-align: middle;                          
                                .fa-star{
                                    color:#ff9000;
                                }
                            }
                        }  
                    }
                } 
            }
        }
    }
}        